<template>
  <div class="app-container">
    <div class="main">
      <div class="warehouse_left">
        <div class="filter_warecontainer">
          <el-form :inline="true" :model="warehouseFromData">
            <el-form-item label="城市">
              <el-select
                v-model="cityId"
                ref="cityIdRef"
                size="small"
                style="width: 130px;"
                clearable
                placeholder="请选择城市"
                @visible-change="citydataList"
                @change="getcityIdslist"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item.id"
                  size="small"
                  :label="item.deptName"
                  :value="{label:item.deptName,value:item.id}"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="区域">
              <el-select
                v-model="deptId"
                size="small"
                ref="deptIdRef"
                clearable
                style="width: 130px;"
                placeholder="请选择区域"
                @visible-change="getareadataList"
                @change="getareadataIds"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  v-for="item in areadataList"
                  :key="item.id"
                  size="small"
                  :label="item.deptName"
                  :value="{label:item.deptName,value:item.id}"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="仓库名称">
              <el-select
                v-model="name"
                ref="nameRef"
                size="small"
                clearable
                style="width: 150px;"
                placeholder="请选择仓库名称"
                @visible-change="getwarehousename"
                @change="getwarehousenameIds"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  v-for="item in warehousenameList"
                  :key="item"
                  size="small"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                plain
                size="small"
                icon="el-icon-search"
                @click="handleFilter"
              >查询</el-button>
              <el-button
                type="success"
                plain
                size="small"
                icon="el-icon-circle-plus-outline"
                @click="handleAddwarehouse"
              >新增仓库</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="warehousetablist">
          <span
            class="name"
            v-for="(item,index) in tabs"
            :class="{active:(indexs==index)}"
            @click="handleTabs(index)"
            :key="index"
          >{{item.name}}</span>
        </div>
        <div class="warehouse_list">
          <el-table :data="warehouselist" border style="width: 100%">
            <el-table-column fixed prop="id" label="ID" width="100"></el-table-column>
            <el-table-column prop="deptName" label="区域"></el-table-column>
            <el-table-column prop="address" label="仓库地址" width="100"></el-table-column>
            <el-table-column prop="name" label="仓库名称"></el-table-column>
            <el-table-column prop="isUp" label="开始接单(1关闭,2开启)"></el-table-column>
            <el-table-column prop="orderAdvanceTime" label="下单提前时间(分钟)"></el-table-column>
            <el-table-column prop="wareHouseType" label="仓库类型"></el-table-column>
            <el-table-column prop="salesOrganizationId" label="销售组织ID"></el-table-column>
            <el-table-column prop="salesOrganizationName" label="销售组织名称"></el-table-column>
            <el-table-column fixed="right" label="操作" width="140">
              <template slot-scope="{row,$index}">
                <el-button type="text" size="small" @click.native="handleUpdate($index, row)">编辑仓库</el-button>
                <el-button type="text" size="small" @click.native="handleDelete($index, row)">删除仓库</el-button>
                <el-button type="text" size="small" @click.native="handleSetclose($index, row)">设置</el-button>
                <!-- <el-button type="text" size="small" @click.native="handleWarehouseload($index, row)" style="margin-left: 0!important;">仓库负荷</el-button> -->
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            layout="sizes,prev, pager, next,total"
            :page.sync="warehouseFromData.page"
            :limit.sync="warehouseFromData.size"
            @pagination="getList"
          />
        </div>
      </div>
      <div class="warehouse_right">
        <el-amap
          vid="amapDemo"
          id="amapDemo"
          :center="center"
          ref="map"
          :zoom="12"
          :plugin="plugin"
          class="amap-demo"
        >
          <!-- <el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker.position"></el-amap-marker> -->
          <el-amap-marker
            v-if="markers&&markers.length>0"
            v-for="(marker,index) in markers"
            :key="index"
            :position="marker.position"
          ></el-amap-marker>
        </el-amap>
      </div>
    </div>
    <!-- 新增仓库 -->
    <el-dialog
      title="新增仓库"
      v-if="addshow"
      :visible.sync="warehouseVisible"
      width="80%"
      :before-close="handleClose"
    >
      <warehouse ref="warehouse" @close="handelDialogReset" @getList="getList"></warehouse>
      <!-- <warehousEidt v-if="dialogStatus=='update'" ref="warehouse" v-bind:detaillist="detaillist"></warehousEidt> -->
    </el-dialog>
    <el-dialog
      title="修改仓库"
      :visible.sync="warehouseEditVisible"
      width="80%"
      :before-close="handleCloseEdit"
    >
      <warehousEidt
        ref="warehousEidt"
        :warehouseFrom="warehouseFrom"
        @close="handelDialogReset"
        @getList="getList"
      ></warehousEidt>
      <!-- <load></load> -->
    </el-dialog>
    <!-- 编辑负荷 -->
    <el-dialog title="仓库负荷" :visible.sync="loadVisible" width="90%" :before-close="handleClose">
      <load :allList="allList" @close="handeloadVisible" @getList="getList"></load>
    </el-dialog>
    <!-- 设置关闭仓库 -->
    <el-dialog
      title="熊猫不走蛋糕-接单设置"
      :visible.sync="closeorderVisible"
      width="45%"
      :before-close="handlecloseorder"
    >
      <closeorder :closeId="closeId" @closeorder="handelcloseorder"></closeorder>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination"; // 分页
import load from "@/components/warehouse/load";
import warehouse from "@/components/warehouse/warehouse";
import warehousEidt from "@/components/warehouse/warehousEidt";
import closeorder from "@/components/warehouse/closeorder";
import {
  deptdepts,
  selectDeptByCityId,
  getWarehousePage,
  getWarehouseName,
  warehouseelete,
  getWarehouseList,
} from "@/api/warehouse";
// import VueAMap from "vue-amap";
export default {
  components: {
    Pagination,
    load,
    warehouse,
    warehousEidt,
    closeorder,
  },
  data() {
    let self = this;
    return {
      warehouseFromData: {
        // cityId: this.cityareaId,
        // name: '', //仓库名称
        page: 1, //页码
        size: 10, //每页页码
      },
      indexs: -1,
      tabs: [
        //标签数据
        {
          name: "显示配送区域",
        },
        {
          name: "显示行政区域",
        },
      ],

      total: 0,
      cityList: [],
      areadataList: [], //区域

      warehousenameList: [], //仓库名称
      warehouselist: [],
      cityIdslist: "",
      cityIdslistname: "",
      deptIdsIdslist: "",
      deptId: "", //区域id
      cityId: "", //城市id
      name: "", //仓库名称
      warehousenameIds: [],
      detaillist: {},
      // 负荷---------------------------------------
      loadVisible: false,
      warehouseVisible: false,
      warehouseEditVisible: false,
      textMap: {
        update: "修改仓库",
        create: "新增仓库",
      },
      dialogStatus: "",
      warehousedata: "",
      // 地图
      center: [121.59996, 31.197646],
      lng: 0,
      lat: 0,
      loaded: false,
      addshow: true,
      plugin: [
        {
          pName: "Geolocation",
          events: {
            init(o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  self.lng = result.position.lng;
                  self.lat = result.position.lat;
                  self.center = [self.lng, self.lat];
                  var map = new AMap.Map("amapDemo");
                  var marker = new AMap.Marker({
                    position: new AMap.LngLat(self.lng, self.lat),
                  });
                  map.add([marker]);
                  map.setZoomAndCenter(13, [self.lng, self.lat]);
                  self.loaded = true;
                  self.$nextTick();
                }
              });
            },
          },
        },
      ],
      //行政区域
      city: null,
      polygons: [],
      getAreaScope: "", // 覆盖物区域
      isPointInRingList: [],
      markers: [],
      searchOption: {
        city: "全国",
        citylimit: true,
      },
      // cakeing: '',
      mapCenter: [121.59996, 31.197646],
      // 仓库负荷
      warehouseId: "",
      warehouseDeliveryDate: "",
      deliveryEndTime: "",
      deliveryStartTime: "",
      timeSlotList: [],
      allList: "",
      warehouseFrom: "",
      cityareaId: "",
      newcenter: "",
      // 关闭接单
      closeorderVisible: false,
      closeId: "",
    };
  },
  watch: {
    warehouseVisible() {
      if (this.warehouseVisible == true) {
        window.removeEventListener("keydown", this.keyupEnter);
      } else {
        window.addEventListener("keydown", this.keyupEnter);
      }
    },
    warehouseEditVisible() {
      if (this.warehouseEditVisible == true) {
        window.removeEventListener("keydown", this.keyupEnter);
      } else {
        window.addEventListener("keydown", this.keyupEnter);
      }
    },
  },
  mounted() {
    var saberareaIds = JSON.parse(localStorage.getItem("saber-areaId"));
    this.cityareaId = saberareaIds["content"];
    this.getList();
    window.addEventListener("keydown", this.keyupEnter);
  },
  destroyed() {
    window.removeEventListener("keydown", this.keyDown, false);
  },
  methods: {
    // 回车事件
    selectBlur(e) {
      if (e.keyCode == 13) {
        this.$refs["cityIdRef"].blur();
        this.$refs["deptIdRef"].blur();
        this.$refs["nameRef"].blur();
        e.returnValue = false;
      }
    },
    keyupEnter() {
      if (window.event.keyCode == 13) {
        this.handleFilter(); // 查询事件
      }
    },
    //如果页面有keep-alive缓存功能，这个函数会触发
    activated() {
      window.addEventListener("keydown", this.keyupEnter);
    },
    deactivated() {
      window.removeEventListener("keydown", this.keyupEnter);
    },

    getList() {
      if (this.cityIdslist) {
        this.warehouseFromData.cityId = this.cityIdslist;
      } else {
        this.warehouseFromData.cityId = this.cityareaId;
      }
      this.warehouseFromData.deptId = this.deptIdsIdslist;
      getWarehousePage(this.warehouseFromData).then((response) => {
        this.warehouselist = response.data.data.rows;
        this.total = response.data.data.total;
        if (this.warehouselist && this.warehouselist.length) {
          this.getAnchorpoint(this.warehouselist);
        } else {
          this.$message({
            showClose: true,
            message: "暂无数据",
            type: "warning",
          });
        }
      });
    },
    //根据城市获取地图位置
    getMapaddress(name) {
      var MSearch;
      var mapObj = new AMap.Map("amapDemo", {
        resizeEnable: true,
        center: [116.397428, 39.90923], //地图中心点
        zoom: 10, //地图显示的缩放级别
      });
      mapObj.plugin(["AMap.PlaceSearch"], () => {
        // mapObj.addControl(new AMap.ToolBar())
        // mapObj.addControl(new AMap.Scale())
        MSearch = new AMap.PlaceSearch({
          //构造地点查询类
          city: "北京市", //城市
        });
        AMap.event.addListener(
          MSearch,
          "complete",
          this.keywordSearch_CallBack
        ); //返回地点查询结果
        MSearch.search(name); //关键字查询
      });
    },
    keywordSearch_CallBack(data) {
      var mapObj = new AMap.Map("amapDemo", {
        resizeEnable: true,
      });
      var poiArr = data.poiList.pois;
      var resultCount = poiArr.length;
      this.poiArr = poiArr; //左边要渲染的数据
      mapObj.setFitView();
      mapObj.setZoomAndCenter(14, [
        poiArr[0].location.lng,
        poiArr[0].location.lat,
      ]);
      this.newcenter = [poiArr[0].location.lng, poiArr[0].location.lat];
    },

    getAnchorpoint(point) {
      var markerlist = [],
        markers = [];
      var mapObj = new AMap.Map("amapDemo", {
        resizeEnable: true,
      });
      // console.log(point[0].longitude, point[0].latitude)
      for (var i = 0; i < point.length; i++) {
        var myIcon = new AMap.Marker({
          position: [point[i].longitude, point[i].latitude],
          icon: "http://api.xiongmaodangao.com/images/xmdg_blue.png",
        });
        mapObj.add(myIcon);
        this.markers = myIcon;
      }
      if (point[0]) {
        mapObj.setZoomAndCenter(14, [point[0].longitude, point[0].latitude]);
      }
    },
    getLocation() {
      const self = this;
      AMap.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
        });

        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, "complete", onComplete);
        AMap.event.addListener(geolocation, "error", onError);

        function onComplete() {
          // data是具体的定位信息
          // console.log('定位成功信息：', data)
        }

        function onError(data) {
          // 定位出错
          console.log("定位失败错误：", data);
          self.getLngLatLocation();
        }
      });
    },

    citydataList() {
      //获取城市列表数据
      deptdepts("").then((response) => {
        this.cityList = response.data.data;
      });
    },

    getcityIdslist(data) {
      //获取城市列表ID
      if (data) {
        this.cityIdslist = data.value;
        this.cityIdslistname = data.label;
        this.deptId = "";
        this.deptIdsIdslist = "";
        this.deptIdsIdslistname = "";
        //  this.warehouseFromData.deptId=''
      } else {
        this.cityIdslist = "";
        this.cityIdslistname = "";
      }
    },
    getareadataIds(data) {
      //获取区域列表ID
      if (data) {
        this.deptIdsIdslist = data.value;
        this.deptIdsIdslistname = data.label;
      } else {
        this.deptIdsIdslist = "";
        this.deptIdsIdslistname = "";
      }
    },
    getwarehousenameIds(data) {
      if (data) {
        this.warehousenameIds = data.value;
      } else {
        this.warehousenameIds = "";
      }
      //获取仓库列表ID
    },
    getareadataList() {
      //区域下拉
      if (this.cityIdslist == "") {
        this.$message({
          showClose: true,
          message: "请选择城市",
          type: "warning",
        });
      } else {
        selectDeptByCityId({
          cityId: this.cityIdslist,
        }).then((res) => {
          this.areadataList = res.data.data;
        });
      }
    },
    getwarehousename() {
      //仓库名称下拉
      if (this.cityIdslist == "") {
        this.$message({
          showClose: true,
          message: "请选择城市",
          type: "warning",
        });
      } else if (this.deptIdsIdslist == "") {
        this.$message({
          showClose: true,
          message: "请选择区域",
          type: "warning",
        });
      } else {
        getWarehouseName({
          cityId: this.cityIdslist,
          deptId: this.deptIdsIdslist,
        }).then((response) => {
          this.warehousenameList = response.data.data;
        });
      }
    },
    handleFilter() {
      //查询
      this.warehouseFromData.page = 1;
      this.warehouseFromData.name = this.name;
      // if (this.warehouseFromData.cityId) {
      //   this.warehouseFromData.cityId = this.cityIdslist;
      // } else {
      //  this.warehouseFromData.cityId = this.cityareaId ;
      // }
      if (this.cityIdslist) {
        this.warehouseFromData.cityId = this.cityIdslist;
      } else {
        this.warehouseFromData.cityId = this.cityareaId;
      }
      this.getList();
      this.indexs = "-1";
      //
    },
    handleAddwarehouse() {
      //添加仓库
      this.dialogStatus = "create";
      this.addshow = true;
      this.warehouseVisible = true;
    },
    // 提交
    handleUpdate(index, row) {
      //编辑仓库
      this.warehouseEditVisible = true;
      this.dialogStatus = "update";
      this.warehouseFrom = Object.assign({}, row);
      // this.warehouseFromList = Object.assign({}, row);
      // console.log(row,'仓库数据化')
    },
    handleDelete(index, row) {
      window.removeEventListener("keydown", this.keyupEnter);
      // 删除仓库
      this.$confirm("确定删除该仓库?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: false,
        //阻止键盘点击回车事件
        beforeClose(action, instance, done) {
          // console.log(action,instance)
          if (action == "confirm") {
            instance.$refs["confirm"].$el.onclick = function (e) {
              e = e || window.event;
              console.log(e.detail);
              if (e.detail != 0) {
                done();
                warehouseelete({
                  id: row.id,
                }).then(() => {
                  this.$message({
                    type: "success",
                    message: "操作成功!",
                  });
                  setTimeout(() => {
                    this.getList();
                    this.listLoading = false;
                  }, 1.5 * 1000);
                });
              } else {
              }
            };
          } else {
            done();
            warehouseelete({
              id: row.id,
            }).then(() => {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              setTimeout(() => {
                this.getList();
                this.listLoading = false;
              }, 1.5 * 1000);
            });
          }
        },
      })
        .then(() => {})
        .catch(() => {});
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          this.addshow = false;
          done();
        })
        .catch(() => {});
    },

    handleWarehouseload(index, row) {
      //仓库负荷

      if (row.deliveryStartTime == "") {
        this.$message({
          showClose: true,
          message: "请先设置配送开始时间",
          type: "warning",
        });
      } else if (row.deliveryEndTime == "") {
        this.$message({
          showClose: true,
          message: "请先设置配送结束时间",
          type: "warning",
        });
      } else {
        this.loadVisible = true;
        this.allList = row;
      }
    },

    handleTabs(item) {
      //行政区域问题
      this.indexs = item;
      if (this.indexs == 1) {
        if (this.cityIdslist == "") {
          this.$message({
            showClose: true,
            message: "请选择城市",
            type: "warning",
          });
        } else {
          var that = this;
          var map = new AMap.Map("amapDemo", {
            resizeEnable: true,
            center: [116.397428, 39.90923], //地图中心点
            zoom: 10, //地图显示的缩放级别
          });
          var district = null;
          var polygons = [];
          //加载行政区划插件

          //行政区查询
          // district.setLevel(document.getElementById('level').value)
          map.plugin(["AMap.DistrictSearch"], function () {
            if (!district) {
              //实例化DistrictSearch
              var opts = {
                subdistrict: 0, //获取边界不需要返回下级行政区
                extensions: "all", //返回行政区边界坐标组等具体信息
                level: "district", //查询行政级别为 市
              };
              district = new AMap.DistrictSearch(opts);
            }
            district.search(that.cityIdslistname, function (status, result) {
              map.remove(polygons); //清除上次结果
              polygons = [];
              var bounds = result.districtList[0].boundaries;
              if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                  //生成行政区划polygon
                  var polygon = new AMap.Polygon({
                    strokeWeight: 1,
                    path: bounds[i],
                    fillOpacity: 0.4,
                    fillColor: "#80d8ff",
                    strokeColor: "#0091ea",
                  });
                  polygons.push(polygon);
                }
              }
              map.add(polygons);
              map.setFitView(polygons); //视口自适应
            });
          });
          if (this.cityIdslist) {
            this.warehouseFromData.cityId = this.cityIdslist;
          } else {
            this.warehouseFromData.cityId = this.cityareaId;
          }
          this.warehouseFromData.deptId = this.deptIdsIdslist;
          getWarehousePage(this.warehouseFromData).then((response) => {
            this.warehouselist = response.data.data.rows;
            this.total = response.data.data.total;
            if (this.warehouselist && this.warehouselist.length) {
            } else {
              this.$message({
                showClose: true,
                message: "暂无数据",
                type: "warning",
              });
            }
          });
        }
      }
      if (this.indexs == "0") {
        if (this.cityIdslist == "") {
          this.$message({
            showClose: true,
            message: "请选择城市",
            type: "warning",
          });
        }
        // else if (this.deptIdsIdslist == "") {
        //   this.$message({
        //     showClose: true,
        //     message: "请选择区域",
        //     type: "warning"
        //   });
        // }
        else {
          const areaList = {
            name: this.name,
            deptId: this.deptIdsIdslist,
            cityId: this.cityIdslist,
          };
          getWarehouseList(areaList).then((res) => {
            var isPointInRingList = []; // path(是否在区域内)
            var overlayGroupsArray = [];
            let result = res.data.data;
            if (result.length >= 1) {
              result.forEach((item, resultindex) => {
                if (result[resultindex].geoJson.geometry !== "") {
                  overlayGroupsArray.push(
                    result[resultindex].geoJson.geometry.coordinates[0]
                  );
                  result[resultindex].geoJson.geometry.coordinates[0].forEach(
                    (item) => {
                      // console.log('item',item)
                      isPointInRingList.push(item);
                    }
                  );
                }
              });
              this.getAreaScope = overlayGroupsArray;
              this.getAreaScopeMethod(this.getAreaScope);
            } else {
              this.getMapaddress(this.cityIdslistname);
            }
          });
          if (this.cityIdslist) {
            this.warehouseFromData.cityId = this.cityIdslist;
          } else {
            this.warehouseFromData.cityId = this.cityareaId;
          }
          this.warehouseFromData.deptId = this.deptIdsIdslist;
          getWarehousePage(this.warehouseFromData).then((response) => {
            this.warehouselist = response.data.data.rows;
            this.total = response.data.data.total;
            if (this.warehouselist && this.warehouselist.length) {
            } else {
              this.$message({
                showClose: true,
                message: "暂无数据",
                type: "warning",
              });
            }
          });
          // this.getList();
        }
      }
    },
    getAreaScopeMethod(subCoordinate) {
      var map = new AMap.Map("amapDemo"),
        path = subCoordinate;
      var polygon = new AMap.Polygon({
        path: path,
        strokeColor: "#FF33FF",
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        fillColor: "#1791fc",
        zIndex: 50,
      });
      map.add(polygon);
      // 缩放地图到合适的视野级别
      map.setFitView([polygon]);
    },
    handelDialogReset() {
      this.warehouseVisible = false;
      this.warehouseEditVisible = false;
    },
    handleCloseEdit() {
      this.$confirm("确认关闭？")
        .then(() => {
          this.closeId = "";
          this.warehouseEditVisible = false;
          window.location.reload();
          done();
        })
        .catch(() => {});
    },
    handeloadVisible() {
      this.loadVisible = false;
    },
    // 设置
    handleSetclose(index, row) {
      this.closeId = row.id;
      this.closeorderVisible = true;
    },
    handlecloseorder() {
      this.$confirm("确认关闭？")
        .then(() => {
          this.closeId = "";
          this.closeorderVisible = false;
          done();
        })
        .catch(() => {});
    },
    handelcloseorder() {
      this.closeorderVisible = false;
    },
  },
};
</script>

<style lang='scss'>
.app-container {
  .el-form {
    display: block !important;
  }

  .main {
    padding: 20px;
    background: #fff;
    display: flex;
    justify-content: space-between;

    .warehouse_left {
      padding: 20px;
      width: 45%;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      border: 1px solid #ebeef5;
      background-color: #fff;
      overflow: hidden;
      color: #606266;
      transition: 0.3s;
      margin-bottom: 10px;

      .el-table td {
        padding: 2px 0 !important;

        .el-button--small {
          padding: 2px;
        }
      }

      .warehousetablist {
        margin-bottom: 20px;

        span {
          border: 1px solid #dcdfe6;
          padding: 6px 8px;
          cursor: pointer;
          margin-right: 5px;
          border-radius: 4px;
          font-size: 14px;

          &.active {
            color: #fff;
            background-color: #43a0ff;
            border-bottom: 1px solid #43a0ff;
          }
        }
      }

      .filter_warecontainer {
        .el-form {
          display: block !important;
        }

        .el-form-item {
          margin-bottom: 10px !important;
        }
      }
    }

    .warehouse_right {
      width: 50%;
      min-height: 600px;
      box-shadow: rgb(223, 228, 237) 2px 2px 10px;
    }
  }
}
</style>
